<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" @submit.native.prevent ref="listQuery"  label-width="100px">
      <el-form-item label="菜单名称:" prop="name" class="form-item">
        <el-input v-model="listQuery.name" class="filter-item" placeholder="菜单名称" clearable/>
      </el-form-item>
      <el-form-item label="显示状态:" class="form-item">
        <el-select placeholder="请选择" style="width:100%;" clearable
                   v-model="listQuery.status" class="form-select" :popper-append-to-body="false">
          <el-option value="0" label="显示"></el-option>
          <el-option value="1" label="不显示"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="success" size="mini" icon="el-icon-plus" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!--表格渲染-->
    <el-table ref="table" v-loading="loading" :data="list" border style="width: 100%;"
              row-key="id" :header-cell-style="{padding: '8px 0 !important',color: '#515a6e'}"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <af-table-column prop="name" label="菜单名称"/>
      <el-table-column prop="level" label="菜单级数" min-width="120">
        <template slot-scope="scope">
          {{{'0':'一级','1':'二级','2':'三级'}[scope.row.level]}}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="菜单类型" min-width="120">
        <template slot-scope="scope">
          {{{'0':'部门','1':'系统','2':'日志'}[scope.row.type]}}
        </template>
      </el-table-column>
      <af-table-column prop="frontName" label="前端名称"/>
      <el-table-column prop="frontImg" label="前端图标" min-width="120">
        <template slot-scope="scope">
          <item :icon="scope.row.frontImg" class="tab-icon"/>
        </template>
      </el-table-column>
      <af-table-column prop="status" label="显示状态">
        <template slot-scope="scope">
          {{{'0':'显示','1':'不显示'}[scope.row.status]}}
        </template>
      </af-table-column>
      <!--<el-table-column align="center" prop="sort" label="排序"/>-->
      <!--<af-table-column prop="description" label="设置">
        <template slot-scope="scope">
          <el-button class="btn" type="text" size="mini"
                     :disabled="scope.row.level | disableNextLevel"
                     @click="examineEdit(scope.$index,scope.row,'update')">查看下一级</el-button>
        </template>
      </af-table-column>-->
      <el-table-column align="center" fixed="right" label="操作" min-width="120">
        <template slot-scope="scope">
          <el-button class="btn" type="text" size="small"
                     @click="handleEdit(scope.$index,scope.row,'update')">修改</el-button>
          <el-popover
            placement="top"
            width="200"
            trigger="manual"
            :ref="'popover-' + scope.row.id">
            <p>确定删除该数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="handleDel(scope.$index,scope.row)">确定</el-button>
            </div>
            <el-button class="btn" type="text" size="small" slot="reference"
                       @click="$refs[`popover-` + scope.row.id].doShow()">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination v-show="total>0" :total="total"
                :page.sync="listQuery.pageNum"
                :limit.sync="listQuery.pageSize"
                @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="35%">
      <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
        <el-form-item label="菜单名称" prop="name" class="form-item">
          <el-input v-model="editForm.name" placeholder="菜单名称" class="filter-item"></el-input>
        </el-form-item>
        <el-form-item label="菜单级数" prop="userType" class="form-item">
          <el-select placeholder="请选择" style="width:100%;" clearable
                     v-model="editForm.level" class="form-select" :popper-append-to-body="false"
                     popper-class="select-popper">
            <el-option :value="0" label="一级"></el-option>
            <el-option :value="1" label="二级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" prop="type" class="form-item">
          <el-select placeholder="请选择" style="width:100%;" clearable
                     v-model="editForm.type" class="form-select" :popper-append-to-body="false"
                     popper-class="select-popper">
            <el-option :value="0" label="部门"></el-option>
            <el-option :value="1" label="系统"></el-option>
            <el-option :value="2" label="日志"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级菜单：" prop="parentId" v-if="editForm.level == 1" class="form-item">
          <el-select v-model="editForm.parentId" class="form-select" clearable
                     placeholder="请选择菜单" style="width:100%;" :popper-append-to-body="false"
                     popper-class="select-popper">
            <el-option
              class="form-select"
              v-for="item in selectMenuList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="前端路径名称：" prop="frontName" class="form-item">
          <el-input v-model="editForm.frontName" placeholder="前端路径名称" class="filter-item"></el-input>
        </el-form-item>
        <el-form-item label="前端图标：" prop="frontImg" class="form-item">
          <el-row :span="34">
            <el-col :span="14">
              <el-input v-model="editForm.frontImg" clearable placeholder="前端图标" class="filter-item"></el-input>
            </el-col>
            <el-col :span="10">
              <el-tooltip class="item" effect="light" placement="right">
                <div slot="content" style="width: 500px;overflow: auto;">
                  <!--多行信息<br/>第二行信息-->
                  <el-icon v-for="item in iconList" :class="item.name" @click.native="iconClick(item)"
                           style="font-size: 26px;color: #666;margin: 4px 10px"/>
                </div>
                <el-button :icon="iconClass" size="small" style="margin-left: 20px;"></el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="显示状态" prop="status" class="form-item" v-if="dialogStatus == 'update'">
          <el-radio-group v-model="editForm.status">
            <el-radio :label="0">显示</el-radio>
            <el-radio :label="1">不显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--<el-form-item label="排序：">
          <el-input v-model="editForm.sort" placeholder="排序" class="filter-item"></el-input>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click.native="dialogFormVisible=false">取消</el-button>
        <el-button type="primary" size="mini" @click="createData">{{dialogStatus == 'create'?'添加':'编辑'}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="二级菜单" :visible.sync="levelVisible" :close-on-click-modal="false">
      <!--表格渲染-->
      <el-table ref="table" v-loading="loading" :data="levelList" border style="width: 100%;">
        <af-table-column prop="name" label="菜单名称"/>
        <el-table-column prop="level" label="菜单级数">
          <template slot-scope="scope">
            {{{'0':'一级','1':'二级','2':'三级'}[scope.row.level]}}
          </template>
        </el-table-column>
        <el-table-column prop="frontName" label="前端名称"/>
        <el-table-column prop="frontImg" label="前端图标">
          <template slot-scope="scope">
            <item :icon="scope.row.frontImg" class="tab-icon"/>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="显示状态" width="140">
          <template slot-scope="scope">
            {{{'0':'显示','1':'不显示'}[scope.row.status]}}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="设置">
          <template slot-scope="scope">
            <el-button class="btn" type="text" size="mini"
                       :disabled="scope.row.level | disableNextLevel"
                       @click="examineEdit(scope.$index,scope.row,'update')">查看下一级</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" >
          <template slot-scope="scope">
            <el-button class="btn" type="text" size="small"
                       @click="handleEdit(scope.$index,scope.row,'update')">修改</el-button>
            <el-popover
              placement="top"
              width="200"
              trigger="manual"
              :ref="'popover-' + scope.row.id">
              <p>确定删除该数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.id].doClose()">取消</el-button>
                <el-button type="primary" size="mini" @click="handleDel2(scope.$index,scope.row)">确定</el-button>
              </div>
              <el-button class="btn" type="text" size="small" slot="reference"
                         @click="$refs[`popover-` + scope.row.id].doShow()">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <amend-pwd v-if="fistFlag == 0"></amend-pwd>
  </div>
</template>

<script>
  import { doPost, doGet, doFile, jsonPost } from '@/api/index'
  import Pagination from '@/components/Pagination/index'
  import { mapGetters } from 'vuex'
  import Item from './Item'
  import { icon } from '@/utils/icon.js'

  export default {
    name: "menu.vue",
    components: {
      Pagination, Item
    },
    computed: {
      ...mapGetters([
        'name',
        'fistFlag'
      ])
    },
    data() {
      return {
        list: [],
        iconList: icon,
        total: 0,
        loading: true,
        listQuery: {
          pageSize: 10,
          pageNum: 1,
          name: '',
          status: ''
        },
        dialogStatus: '',
        textMap:{
          update: '编辑',
          create: '新增'
        },
        dialogFormVisible: false,
        iconClass: '',
        editForm: {
          status: '',
          name: '',
          level: '',
          parentId: '',
          sort: '',
          frontName: '',
          frontImg: '',
          type: ''
        },
        editFormRules: {
          name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
          level: [{ required: true, message: '菜单级数不能为空', trigger: 'blur' }],
          status: [{ required: true, message: '启用状态不能为空', trigger: 'blur' }],
          parentId: [{ required: true, message: '上级菜单不能为空', trigger: 'blur' }],
          frontName: [{ required: true, message: '前端路径名称不能为空', trigger: 'blur' }]
        },
        selectMenuList: [],
        parentId: '',
        levelVisible: false,
        levelList: []
      }
    },
    created() {
      this.iconClass = this.iconList[0].name
      this.getList()
    },
    methods: {
      resetParentId(){
          let form = {
            pageSize: 30,
            pageNum: 1,
          }
        doPost('menu/list/'+this.parentId, form).then(res => {
            this.levelList = res.data.list
          }).catch(error => {
            this.levelList = []
          })
      },
      iconClick(item) {
        console.log(item)
        this.editForm.frontImg = item.name
        this.iconClass = item.name
      },
      getList() {
        this.loading = true
        this.getparent()
        // doPost('menu/list',this.listQuery).then(res => {
        doPost('menu/treeList',this.listQuery).then(res => {
          this.list = res.data
          this.loading = false
          // this.total = res.data.total
          // this.selectMenuList = res.data.list;
          // this.selectMenuList.unshift({id: '', title: '无上级菜单'});
        }).catch(error => {
          this.loading = false
          this.list = []
          // this.selectMenuList = []
          // this.total = 0
        })
      },
      getparent() {
        doGet('menu/getParentMenu').then(res => {
          this.selectMenuList = res.data
        }).catch(error => {
          this.selectMenuList = []
        })
      },
      // 添加弹窗
      handleAdd() {
        this.dialogFormVisible = true
        this.dialogStatus = 'create'
        this.parentId = ''
        this.editForm = {
          status: 0,
          name: '',
          level: '',
          parentId: '',
          sort: 0,
          frontName: '',
          frontImg: '',
          type: '',
        }
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },
      //  查看下一级
      examineEdit(index, row) {
        // this.$router.push({path: '/user/menu', query: {parentId: row.id}})
        this.levelVisible = true
        this.parentId = row.id
        this.resetParentId();
      },
      //修改弹窗
      handleEdit(index, row) {
        if (row) {
          for (var key in row) {
            if (row[key] == null || typeof(row[key]) == "undefined") {
              delete row[key];
            }
          }
        }
        this.dialogFormVisible = true
        this.dialogStatus = 'update'
        this.editForm = {
          status: row.status,
          name: row.name,
          level: row.level,
          parentId: row.parentId,
          sort: 0,
          frontName: row.frontName,
          frontImg: row.frontImg,
          type: row.type,
          id: row.id
        }
        // this.editForm = Object.assign({}, row)
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },
      //提交表单
      createData() {
        this.$refs.editForm.validate(valid => {
          if (valid) {
            doPost(`menu/${this.dialogStatus == 'create' ? 'add' : 'update'}`, this.editForm).then(res => {
              if (res.code == 200) {
                this.getList()
                if (this.parentId) {
                  this.resetParentId();
                }
                this.$message.success({
                  message: this.dialogStatus == 'create'?'添加成功':'修改成功',
                  type: 'success'
                })
                this.dialogFormVisible = false
              } else {
                this.$message.error(res.message)
              }
            }).catch(error => {
              this.$message.error(error.message)
            })
          }
        })
      },
      //删除
      handleDel(index, row) {
        doPost('menu/delete/'+row.id).then(res => {
          if (res.code == 200) {
            this.$message.success({
              type: 'success',
              message: '删除成功'
            })
            this.list.splice(index, 1)
            this.total--
            this.$refs[`popover-` + row.id].doClose()
          } else {
            this.$message.error(res.message)
          }
        }).catch(error => {
          this.$message.error(error.message)
        })
      },
      handleDel2(index, row) {
        doPost('menu/delete/' + row.id).then(res => {
          if (res.code == 200) {
            this.$message.success({
              type: 'success',
              message: '删除成功'
            })
            this.resetParentId();
            this.getList()
            this.levelList.splice(index, 1)
            this.$refs[`popover-` + row.id].doClose()
          } else {
            this.$message.error(res.message)
          }
        }).catch(error => {
          this.$message.error(error.message)
        })
      }
    },
    filters: {
      disableNextLevel(value) {
        if (value === 0) {
          return false;
        } else {
          return true;
        }
      }
    }
  }
</script>

<style scoped>
/*.svg-icon {
  font-size: 18px;
}*/
</style>
